<link rel="stylesheet" href="/static/admin/lib/gridstack/gridstack.min.css" />
<script src="/static/admin/lib/gridstack/gridstack-all.js"></script>
<script src="/static/admin/lib/echarts/echarts-min.js"></script>

<style type="text/css">
    .grid-stack {
        background: #FAFBFB;
        height: 100% !important;
    }

    .grid-stack-item-content {
        background-color: #fff;
        border: solid 1px #f3f2f2;
        position: relative;
        border-radius: 4px;
    }

    .grid-stack-instance-1>.grid-stack-item>.grid-stack-item-content {
        inset: 5px !important;
    }

    .widgets {
        height: 140px;
        z-index: 99;
        display: none;
        position: relative;
        border-bottom: solid 1px #f3f2f2;
        ;
        padding: 10px 0;
    }

    .widgets img {
        width: 140px;
        height: 80px;
        margin: 10px;
    }

    .onewidget {
        display: inline-block;
        text-align: center;
    }

    .onewidget .title {
        font-weight: 600
    }

    .onewidget .iconfont {
        margin-top: 5px;
        cursor: pointer;
    }

    .widgetarrow {
        position: absolute;
        left: 50%;
        top: 0;
        z-index: 99;
        display: none;
        cursor: pointer;
    }

    .cancelwidget {
        position: absolute;
        left: 50%;
        top: 160px;
        z-index: 99;
        font-size: 20px;
        cursor: pointer;
    }

    .setter {
        position: absolute;
        right: 5px;
        top: 5px
    }

    .logininfo {
        height: 80px;
        background-image: url(/static/admin/images/blue_bg.png);
        border-radius: 4px;
        color: #fff;
        background-size: cover;
    }

    .delete {
        cursor: pointer;
    }
</style>

<div style="position: relative;">
    <div id="widgets" class="widgets">

        <i class="iconfont icon-24gf-ejectUpSquare cancelwidget"></i>
        <div class="rc-flex" style="  overflow-x: auto; white-space: nowrap; ">

            <?php foreach ($myallwidgets as $myallwidget) {
            ?>

                <div class="onewidget">
                    <div>
                        <img src="<?php echo $myallwidget['logo'] ?>" />
                    </div>
                    <div class="title"><?php echo $myallwidget['title'] ?></div>
                    <div class=""> <i class="iconfont icon-tianjia addwidget" widget="<?php echo $myallwidget['ident'] ?>"></i></div>
                </div>
            <?php
            } ?>


        </div>
    </div>

</div>
<div style="padding: 5px;   background: #FAFBFB; height:calc(100% - 10px) ">
    <div class="grid-stack"></div>
</div>

<script type="text/javascript">
    layui.use(function() {
        var layer = layui.layer;
        var dropdown = layui.dropdown;

        var mylayoutwidgets_json = '<?php echo $mylayoutwidgets ?>';
        mylayoutwidgets_json = mylayoutwidgets_json.replace(/[\t\n\r]/g, '');
        mylayoutwidgets_json = mylayoutwidgets_json.replace(/(?<=([^{:,]))(")(?=([^}:,]))/g, "\\\"");

        var mylayoutwidgets = $.parseJSON(mylayoutwidgets_json);
        var items = [];
        for (var i = 0; i < mylayoutwidgets.length; i++) {
            items.push({
                widget: mylayoutwidgets[i].widget,
                id: mylayoutwidgets[i].areaid,
                widgettype: 1,
                content: mylayoutwidgets[i].content,
                x: mylayoutwidgets[i].x_coordinate,
                y: mylayoutwidgets[i].y_coordinate,
                w: mylayoutwidgets[i].width,
                h: mylayoutwidgets[i].height,
            });
        }

        var grid = GridStack.init({
            cellHeight: 93,

        });
        grid.load(items);


        grid.on('change', function(event, items) {
            var datas = [];
            for (var i = 0; i < items.length; i++) {
                datas.push({
                    widget: items[i].widgetname,
                    areaid: items[i].id,
                    widgettype: 1,
                    x_coordinate: items[i].x,
                    y_coordinate: items[i].y,
                    width: items[i].w,
                    height: items[i].h,
                });
            }

            if (datas.length > 0) {
                $.ajax({
                    url: '/admin/Index/index?op=editWidget', //请求路径
                    type: "POST", //请求方式
                    data: {
                        items: datas
                    },
                    success: function(data) {
                        if (data.code == 0) {
                            grid.update(event.detail[0].el, {
                                content: data.data.widget
                            });
                        } else {
                            toastr_error(data.message);
                        }
                    },
                    error: function() {},
                    complete: function() {
                        layer.closeAll();
                    }

                });

            }

        })

        grid.on('added', function(event, items) {
            layer.load();
            var widgetname = items[0].widgetname;
            $.ajax({
                url: '/admin/Index/index?op=addWidget', //请求路径
                type: "POST", //请求方式
                data: {
                    widget: widgetname,
                    areaid: items[0].id,
                    widgettype: 1,
                    x_coordinate: items[0].x,
                    y_coordinate: items[0].y,
                    width: items[0].w,
                    height: items[0].h,
                },
                success: function(data) {
                    if (data.code == 0) {
                        grid.update(event.detail[0].el, {
                            content: data.data.widget
                        });
                    } else {
                        toastr_error(data.message);
                    }
                },
                error: function() {},
                complete: function() {
                    layer.closeAll();
                }

            });

        })

        grid.on('removed', function(event, items) {
            console.log(event);
            console.log(items);
            $.ajax({
                url: '/admin/Index/index?op=delWidget', //请求路径
                type: "POST", //请求方式
                data: {
                    id: items[0].id
                },
                success: function(data) {
                    if (data.code == 0) {

                    } else {
                        toastr_error(data.message);
                    }
                },
                error: function() {},
                complete: function() {
                    layer.closeAll();
                }

            });
        });


        //添加挂件
        $('.addwidget').click(function() {
            var widgetname = $(this).attr('widget');
            grid.addWidget({
                id: Math.floor(Date.now() / 1000) + '_' + widgetname,
                widgetname: widgetname,
                content: ''
            });


        });

        $('.cancelwidget').click(function() {
            $('#widgets').hide(300);
            $('#widgetarrow').hide();
        });





        dropdown.render({
            elem: '.grid-stack', // 也可绑定到 document，从而重置整个右键
            trigger: 'contextmenu', // contextmenu
            isAllowSpread: false, // 禁止菜单组展开收缩
            data: [{
                title: '添加挂件',
                id: 'addwidget'
            }, {
                title: '编辑布局',
                id: 'set'
            }, {
                title: '完成布局',
                id: 'setok'
            }],

            click: function(obj, othis) {
                if (obj.id === 'addwidget') {
                    grid.enableMove(true);
                    grid.enableResize(true);
                    $('#widgets').show(300);
                    $('.grid-stack-item-content').append('<i class="setter delete iconfont icon-danseshixintubiao-" style="color:#FABE00"></i>');
                }
                if (obj.id === 'set') {
                    grid.enableMove(true);
                    grid.enableResize(true);
                    $('.grid-stack-item-content').append('<i class="setter delete iconfont icon-danseshixintubiao-" style="color:#FABE00"></i>');

                }

                if (obj.id === 'setok') {
                    grid.enableMove(false);
                    grid.enableResize(false);
                    $('.grid-stack-item-content').find('.delete').remove('');
                    $('#widgets').hide(300);
                    grid.save();

                }
            }

        });
        grid.enableMove(false);
        grid.enableResize(false);




        $('body').on('click', '.delete', function() {
            var item = $(this).parents('.grid-stack-item');
            var id = item.attr('gs-id');
            grid.removeWidget(document.querySelector('[gs-id="' + id + '"]'));

        })

    });
</script>